<template>
  <div>
    <el-table v-loading="listLoading" :data="listData" element-loading-text="加载中" border fit row-key="id"
              highlight-current-row stripe :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              size="small" :default-expand-all="expandAll"  :indent="32">
      <el-table-column v-for="(column,index) in columns" :key="index" :prop="column.key" :label="column.label"
                       :align="column.align || 'center'"  :width="column.width"
                       :min-width="column.minWidth" :max-width="column.maxWidth" :show-overflow-tooltip="!column.type"
                       :fixed="$store.state.app.device !== 'mobile' ? column.fixed : undefined" header-align="center"
      >
        <template slot-scope="scope">
          <div v-if="column.type == 'sort'">
            <el-button  class="el-icon-top" @click="changeDataSort(scope.row,-1)"></el-button>
            <el-button  class="el-icon-bottom" @click="changeDataSort(scope.row,1)"></el-button>
          </div>
          <slot v-else-if="column.type == 'image' && !scope.row[column.key]">暂无图片</slot>
          <img v-else-if="column.type == 'image'" @click="selectImg(scope.row[column.key],column.type)" :src="(scope.row[column.key].indexOf('//')< 0 ? $media: '') + scope.row[column.key] +'?x-oss-process=image/resize,h_50'" style="max-height: 50px;"/>
          <slot v-else-if="column.type == 'video' && !scope.row[column.key]">暂无视频</slot>
          <img v-else-if="column.type == 'video'" @click="selectImg(scope.row[column.key],column.type)" :src="(scope.row[column.key].indexOf('//')< 0 ? $media: '') + scope.row[column.key] + '?x-oss-process=video/snapshot,t_1000,h_50,m_fast,f_jpg'" style="max-height: 50px;"/>
          <el-switch v-else-if="column.type == 'switch'" v-model="scope.row[column.key]" active-color="#13ce66" :active-value="switchData.yes" :inactive-value="switchData.no" inactive-color="#ff4949"/>
          <slot v-else :name="column.key" :index="scope.$index" :row="scope.row" :column="column">
            <i v-if="(column.key.indexOf('Time') >= 0 || column.key.indexOf('Date') >= 0) && scope.row[column.key]" class="el-icon-time"/>
            {{ format != null && typeof(format[column.key]) != 'undefined' ? format[column.key](scope.row,scope.$index): scope.row[column.key]}}
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisibleImg" destroy-on-close>
      <img :src="(fileUrl.indexOf('//')<0 ? $media : '') + fileUrl" width="100%" />
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleVideo" destroy-on-close>
      <video preload="auto" :src="(fileUrl.indexOf('//')<0 ? $media : '') + fileUrl" width="100%" controls="controls"></video>
    </el-dialog>
  </div>
</template>

<script>

  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import { getBaseList } from '@/api/common'
  import { treeFind } from '@/utils/treeFind'

  export default {
    name: 'BaseList',
    components: { Pagination },
    props: {
      url: { type: String, default: '' },
      expandAll: { type: Boolean, default: true},
      query: { type: Object, default: () => {} },
      columns: { type: Array, default: () => [] },
      format: { type: Object, default: () => {} },
      sortChange: { type: Function, default: () => {} },
      append: { type: Object, default: () => {} }
    },
    data: () => {
      return {
        total: 0,
        // -- 数据 --
        listData: [],
        // -- 状态 --
        listLoading: false,
        dialogVisibleImg: false,
        dialogVisibleVideo: false,
        switchData: {
          yes: 1,
          no: 2
        },
        fileUrl: ''
      }
    },
    computed: {
      needFixed() {
        return this.$store.state.app.device !== 'mobile'
      }
    },
    watch: {
    },
    methods: {
      fetchData() {
        this.listLoading = true
        getBaseList(this.url, this.query).then(response => {
          this.listData = response.data
          this.listLoading = false
        })
      },
      changeDataSort(row, next) {
        let rowGroupIndex
        treeFind(this.listData,row.parentId).then(res => {
          res.forEach((e,index) => {
            if (e.id === row.id) {
              rowGroupIndex = index
            }
          })
          let nextGroupIndex = rowGroupIndex + next;
          if (-1 < nextGroupIndex && nextGroupIndex < res.length) {
            this.sortChange(
                res[rowGroupIndex].id, res[rowGroupIndex].sortBy,
                res[nextGroupIndex].id, res[nextGroupIndex].sortBy
            )
          }
        })

      },
      selectImg(val, type) {
        if (!val) {
          return;
        }
        if (type === "image") {
          this.dialogVisibleImg = true;
        }
        if (type === 'video') {
          this.dialogVisibleVideo = true;
        }
        this.fileUrl = val;
      },
    }
  }
</script>

<style scoped>
</style>
